<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>搜索</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../layer/css/layui.css" media="all"/>
    <link rel="stylesheet" href="../css/topicList.css"/>

</head>
<body>
<div>
    <input class="searchInput" type="text" name="name" id="inputName" title="课题名字" />
    <button type="button" onclick="query()" class="btn btn-primary">搜索</button>
</div>
<div  id="topicList">

</div>

<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/common/inputTool.js"></script>
<script src="/myth/layer/layui.js" charset="utf-8"></script>
<script>

    $("#inputName").focus()
    enterSubmit("inputName", query)

    function query() {
        var name=$("#inputName").val()
        $.get("../student/ChooseTopic/q/0?name="+name, function (data) {
            // console.log(data)
            // console.log(data.content)
            resultList=''
            if(data.content.length === 0){
                resultList='<span class="none-title">暂无相关课题</span>';
            }else {
                data.content.forEach(function (value) {
                    resultList += '<div class="layui-collapse">' +
                        '<div class="layui-colla-item">' +
                        '    <h2 class="layui-colla-title">' + value.name + '<i class="layui-icon layui-colla-icon"></i></h2>' +
                        '    <div class="layui-colla-content">' +
                        '          <div class="list-item">' + value.attention + '</div><br/>' +
                        '          <button class="btn btn-primary item-button" onclick="selectTopic('+value.topicId+')">选择课题</button>' +
                        '    </div>' +
                        '  </div>' +
                        '</div>'
                })
            }
            $("#topicList").html(resultList)
            // 异步的执行 所以要在ajax中运行
            layui.use(['element', 'layer'], function(){
                // console.log("更新")
                var element = layui.element;
                element.init();
            });
    })
    }

</script>
</body>
</html>